import React from 'react'
import input from './index.module.css'
import propsTypes from 'prop-types'

export default class Input extends React.Component{
    static defaultProps={
        type:'text',
        model:{},
        title:'',
        style:{},
        area:false
    }
    static propTypes={
        model:propsTypes.shape({
            name:propsTypes.string.isRequired,
            value:propsTypes.string.isRequired,
            fun:propsTypes.func.isRequired
        }),
        type:propsTypes.string,
        title:propsTypes.string,
        style:propsTypes.object,
        area:propsTypes.bool
    }
    renderArea=()=>{
        let el='多行文本域'
        let {model,title}=this.props
        let {name,value,fun}=model
        el=(
            <div>
                <span>{title}</span>
                <textarea name={name} value={value} onChange={fun}></textarea>
            </div>
        )
        return el
    }
    renderInput=()=>{
        let el='单行文本框'
        //拿到输入的model,标题,类型
        let {model,title,type}=this.props
        let {name,value,fun}=model
        el=(
            <div>
                <span>{title}</span>
                <input type={type} name={name} value={value} onChange={fun}/>
            </div>
        )
        return el
    }
    renderArea
    render(){
        let {area}=this.props
        return area?this.renderArea():this.renderInput()
    }
}